<template>
	<view class="register_wrap">
		<!-- 获取用户头像 -->
		<!-- 
		-->
		<!-- 	<view class="title_box">
		   最后一步,填写信息,完成注册!
		</view> -->
		<view class="register_form_box">
			<view class="register_item_box avatar_box">
				<!-- <text class="label">头像</text> -->
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<text v-if="userStore.registerInfo.userProfilePicture == ''" class="text">选择头像</text>
					<image v-else class="avatar" :src="userStore.registerInfo.userProfilePicture"></image>
				</button>
			</view>

			<view class="register_item_box nick_name_box">
				<!-- <wd-input type="text" label="昵称" v-model="nickName" placeholder="请输入昵称" /> -->
				<text class="label">昵称</text>
				<input type="nickname" class="nick_name_input" name="nickname" v-model="userStore.registerInfo.userNearName" placeholder="请输入昵称" @blur="nickNameBlur" />
				<!-- <wd-input class="nick_name_input" type="text" v-model="nickName" placeholder="请输入用户名"  /> -->
				<!-- <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl" style="width: 100px;height: 100px;"></image> 
				</button> -->
				<!-- <text class="use_wx_nick_name_text">使用微信昵称</text> -->
			</view>

			<view class="btn_box" @click="immediatelyRegisterClick">
				<wd-button size="large" type="primary" :disabled="userStore.registerInfo.userNearName == '' || userStore.registerInfo.userProfilePicture == ''">
					<text class="register_btn_text">立即注册</text>
				</wd-button>
			</view>
		</view>

		<TechnicalSupport></TechnicalSupport>
	</view>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
	name: 'Register'
})
</script>
<script setup>
import TechnicalSupport from '@/components/technicalSupport.vue'
import { imgtofile } from '@/utils/file.js'
import { useUserStore } from '@/stores/user.js'
import { upLoadFileApi } from '@/api/file.js'
import { registerUserApi } from '@/api/user.js'

const userStore = useUserStore()

const avatarUrl = ref('')

const nickName = ref('')

const onChooseAvatar = (e) => {
	console.log('微信头像信息', e)

	let fileData
	// console.log('fileData',fileData);
	const fileSystemManager = uni.getFileSystemManager()
	fileSystemManager.readFile({
		filePath: e.detail.avatarUrl, // 图片临时路径
		success: async (data) => {
			console.log('data', data)
			fileData = data.data
			// uploadFile(src, file).then((data) => {
			// 	resolve(data);
			// });
			await upLoadFileApi(e.detail.avatarUrl)
				.then((res) => {
					console.log('上传头像res', res)
					let rData = JSON.parse(res.data)
					console.log('rData', rData)
					userStore.registerInfo.userProfilePicture = rData.data
				})
				.catch((err) => {
					console.log('上传图片err', err)
				})
		},
		fail: (err) => {
			console.log('读取文件失败', err)
		}
	})
}

const nickNameBlur = (e) => {
	userStore.registerInfo.userNearName = e.detail.value
}

// 立即注册点击事件
const immediatelyRegisterClick = () => {
	console.log('1111', 1111)
	if(userStore.registerInfo.userProfilePicture=="" || userStore.registerInfo.userNearName=="" ){
		uni.showToast({
			title:"未设置头像或昵称",
			mask:true,
			duration:1000,
			icon:"none"
		})
	}else{
		registerUserFunc()
	}
}

// 注册用户的函数
const registerUserFunc = async () => {
	let data = {
		openId: userStore.currentOpenId,
		userProfilePicture: userStore.registerInfo.userProfilePicture,
		userNearName: userStore.registerInfo.userNearName
	}
	console.log('注册data', data)
	await registerUserApi(data)
		.then((res) => {
			console.log('注册res', res)
			// 判断成功或失败
			if(res.data.result == "success"){
				uni.showToast({
					title: '注册成功!',
					icon: 'success',
					duration: 1000,
					mask: true
				})
				uni.redirectTo({
					url:"/pages/index/index"
				})
			}else if(res.data.result == "error"){
				uni.showToast({
					title: '注册失败!',
					icon: 'error',
					duration: 1000,
					mask: true
				})
			}
		})
		.catch((err) => {
			console.log('注册err', err)
			uni.showToast({
				title: '注册失败!',
				icon: 'error',
				duration: 1000,
				mask: true
			})
		})
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.title_box {
	text-align: center;
	letter-spacing: 1px;
}

.register_form_box {
	margin-top: 100px;
	display: flex;
	flex-direction: column;
	padding: 0px 60px;

	.register_item_box {
		// border: 1px solid red;
		display: flex;
		flex-direction: row;

		.avatar-wrapper {
			height: 100%;
			width: 82px;
			background-color: rgba(0, 0, 0, 0);
			padding: 0;
			font-size: 12px;
			z-index: 2;

			.avatar {
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.text {
				width: 100%;
				height: 100%;
				background-color: rgba(#ccc, 0.2);
				letter-spacing: 1px;
				padding-top: 26px;
				padding-left: 3px;
				display: inline-block;
			}
		}
	}
}

.avatar_box {
	height: 80px;
}

.nick_name_box {
	height: 36px;
	line-height: 36px;
	margin-top: 76px;
	// border-top: 0.2px solid rgba(#a5a5a5,0.6);
	border-bottom: 0.2px solid rgba(#a5a5a5, 0.6);
	padding: 0px 20px 0px 20px;
	
	.label{
		width: 60px;
		display: inline-block;
		letter-spacing: 1px;
		// border: 1px solid red;
	}

	.nick_name_input {
		// margin-left: 20px;
		line-height: 36px;
		position: relative;
		top: 4px;
		color: #616161;
		text-align: center;
	}

	.use_wx_nick_name_text {
		font-size: 12px;
		letter-spacing: 1px;
		display: inline-block;
		width: 100px;
		line-height: 44px;
		color: #199d5f;
	}
}

.btn_box {
	margin-top: 120px;
	.register_btn_text {
		padding: 16px 60px 16px 64px;
		letter-spacing: 4px;
		font-weight: bold;
		display: inline-block;
	}
}

:deep(.wd-input) {
	position: relative;
	left: -22px;
	.wd-input__label {
		// height: 20px 	;
		margin: 0;
		min-height: 0px !important;
		padding-left: 20px !important;
		color: #818181;
	}
}

:deep(.wd-button){
	width: 100% !important;
}
</style>
